<!-- 主页的页面 -->
<template>
  <!-- 引入这个containner布局 -->
  <el-container class="home_container">
    <!-- 头部 -->
    <el-header class="el-header">
      <div>
        <img src="../assets/logo.png" alt="显示的一个logo" />
        <span>武汉理工表白墙</span>
      </div>
      <el-dropdown @command="handleCommand" split-button type="primary">
        {{ username }}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">首页</el-dropdown-item>
          <el-dropdown-item command="b">修改密码</el-dropdown-item>
          <el-dropdown-item command="c">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 中间和这个侧边栏 -->
    <el-container>
      <el-aside :width="collapse ? '64px' : '200px'" class="el-aside">
        <div class="toggle-button" @click="toggleNav">|||</div>

        <!-- 在这个地方动态绑定的时候,才可以使用这个js里面的数据的类型 -->
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#409eff"
          :collapse="collapse"
          :collapse-transition="false"
          unique-opened
          :router="true"
          :default-active="activePath"
        >
          <!-- 一级菜单 -->
          <el-submenu index="1" key="1">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>首页</span>
            </template>
          </el-submenu>
          <!-- 系统管理  用户来进行编写的-->
          <el-submenu index="2" key="2" v-show="author.indexOf('admin') >= 0">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>

            <el-menu-item
              index="/userManage"
              key="2-1"
              @click="saveActivePath('/userManage')"
            >
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>用户管理</span>
              </template>
            </el-menu-item>

            <!-- 
              
            <el-menu-item
              index="/authorizationManage"
              key="2-2"
              @click="saveActivePath('/authorizationManage')"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>权限管理</span>
              </template>
            </el-menu-item>
              -->
          </el-submenu>
          <!-- 用户管理，在这个地方直接可以进行编写 -->
          <el-submenu index="3" key="3">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>用户操作</span>
            </template>

            <el-menu-item
              index="/mostHotCard"
              key="3-1"
              @click="saveActivePath('/mostHotCard')"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>最热消息</span>
              </template>
            </el-menu-item>

            <el-menu-item
              index="/mostNewCard"
              key="3-2"
              @click="saveActivePath('/mostNewCard')"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>最新消息</span>
              </template>
            </el-menu-item>

            <!-- 
            <el-menu-item
              index="/writeCard"
              key="3-3"
              @click="saveActivePath('/writeCard')"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>编写卡片</span>
              </template>
            </el-menu-item>
           -->
          </el-submenu>

          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统杂项</span>
            </template>

            <el-menu-item
              index="/logInfo"
              key="4-1"
              @click="saveActivePath('/logInfo')"
            >
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>操作日志</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <!-- 这个id的绑定主要就是为了设置这个点击的时候,这个颜色的不变化,然后在这个设置的一个东西 -->
        </el-menu>
      </el-aside>
      <el-main class="el-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
  <!-- <div>
      <el-button type="info"  @click="logout">安全退出</el-button>
  </div> -->
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      //菜单列表
      // menuList: [],
      collapse: false,
      username: "",
      author: "",
      activePath: "/welcome", //或多这个路由
    };
  },
  created() {
    this.getUserName(); //得到的一个用户的一个名称
    this.activePath = window.sessionStorage.getItem("activePath"); //得到之前以一个访问的一个路径
    this.author = JSON.parse(window.sessionStorage.getItem("user")) //代表当前的一个角色的信息
      .authorities.map((obj, index) => {
        return obj.authority;
      })
      .join(",");
  },
  // 因为在这个地方我们是一进来就需要访问的一个方法,那么就需要放到这个create方法里面,就是类似于这个onload事件,那么就是需查询这个meanulist
  methods: {
    async logout() {
      const { data: res } = await this.$http.post("/logout");
      if (res.status == "200") {
        window.sessionStorage.clear(); //清楚这个用户的信息，然后就可以完全安装这个流程。
        // const {data:res} = await this.$http.post("/logout")
        this.$message.warning("登出成功！"); //信息的提示
        this.$router.push("login"); //这个就是转到这个登录的页面
      } else {
        this.$message.warning("登出失败！"); //信息的提示
      }
    },
    handleCommand(command) {
      switch (command) {
        case "c":
          this.logout();
          break;
        case "b":
          this.$router.push("updatePassword");
          break;
        case "a":
          this.$router.push("welcome"); //首页跳转到这个welcom组件上面
          break;
        default:
          break;
      }
    },
    getUserName() {
      this.username = JSON.parse(window.sessionStorage.getItem("user")).name;
    },
    // async getMenuList() {
    //   const { data: res } = await this.$http.get("menus"); //在这个地方路径不需要加上这个斜杠,这个在将来进行访问的结果
    //   if (res.flag != 200) {
    //     return this.$message.error("获取列表失败!"); //失败的错误信息
    //   }
    //   this.menuList = res.menus; //成功的时候的数据访问
    // },
    toggleNav() {
      this.collapse = !this.collapse; //控制伸缩
    },
    saveActivePath(path) {
      //保存这个访问的路径
      this.activePath = path;
      window.sessionStorage.setItem("activePath", path); //放到这个session里面,
    },
  },
};
</script>

<style lang="less"  scoped>
.home_container {
  height: 100%;
}

/* 头部的样式 */
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 0%;
  align-items: center;
  color: #ffffff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}

/* 侧边栏的样式 */
.el-aside {
  background-color: #333744;
  .el-menu {
    border-right: none;
  }
}

/* 主题的样式 */
.el-main {
  background-color: #eaedf1;
}
img {
  width: 55px;
  height: 55px;
}
/* 伸缩按钮 */

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
</style>
